<template>
  <div>
    <el-header>
      <BlogHeader :active-index="'2'"></BlogHeader>
    </el-header>

    <el-form :model="form" label-width="80px" class="main">

      <el-form-item label="题目">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <img v-if="image" :src="image" class="avatar">
        <input name="avatar" type="file" @change="imgSubmit"></input>
      </el-form-item>
      <div class="toolbar">
        <el-button-group>
          <el-button size="mini" @click="addContent('****')">加粗</el-button>
          <el-button size="mini" @click="addContent('----------')">分割</el-button>
          <el-button size="mini" @click="addContent('#')">标题</el-button>
          <el-button size="mini" @click="addContent('``')">文本</el-button>
          <el-button size="mini" @click="addContent('``````')">代码</el-button>
          <el-button size="mini" @click="addContent('*')">无序列表</el-button>
          <el-button size="mini" @click="addContent('1. ')">有序列表</el-button>
        </el-button-group>
      </div>

      <el-form-item label="时间限制">
        <el-input v-model="form.time_limit"></el-input>
      </el-form-item>
      <el-form-item label="空间限制">
        <el-input v-model="form.memory_limit"></el-input>
      </el-form-item>
      <el-form-item label="用例数量">
        <el-input v-model="form.cases"></el-input>
      </el-form-item>
      <el-form-item label="测试用例">
        <input name="file" type="file" @change="caseSubmit"></input>
      </el-form-item>


      <el-form-item label="题目描述">
        <BlogMarkdown :text="this.form.content"
                      @input="msg => this.form.content = msg"></BlogMarkdown>
        <el-button round style="margin-top: 20px" icon="el-icon-edit" @click="onSubmit">发表</el-button>
        <el-button round style="margin-top: 20px" @click="logout">管理员登出</el-button>
      </el-form-item>

    </el-form>
  </div>


</template>

<script>
import BlogHeader from "../components/BlogHeader";
import {postBlog, postImg, postQuestion, postCase, getBlogs} from "../api/api";
import BlogMarkdown from "../components/BlogMarkdown";
const token = localStorage.getItem('mg-token')
// import authorization from '@/utils/authorization'
export default {
  name: "QuestionCreate",
  components: {BlogMarkdown, BlogHeader},
  created() {

  },
  mounted() {
    this.username = localStorage.getItem('manager')
    getBlogs('/api/question/numbers').then(response => {
      console.log(response.data.data.numbers)
      this.cur = response.data.data.numbers + 1
    })
  },

  data() {
    return({
      formData: '',
      form: {
        title: '',
        content: '',
        time_limit: 0,
        memory_limit: 0,
        cases: 0,
      },
      username: '',
      image: '',
      imagePath: '',
      cur: 0,
    })
  },

  methods: {
    imgSubmit(e) {
      if(!this.username)
      {
        alert('请登录！');
        setTimeout(() => {
          this.$router.push({name: 'ManagerLogin'});
        }, 500)
      }
      else
      {
        let formData = new FormData(), file = e.target.files[0]
        this.formData.append('singleFile', file)

        postImg(formData)
          .then(response => {
            if(response.status >= 200 && response.status < 300)
            {
              alert("图片上传成功")
              this.imagePath = response.data.data.filename
              this.image = '/images' + this.imagePath
            }
          })
      }
    },
    // TODO: BUG：上传的文件与真正问题的ID不一定一致 当两个管理员同时上传文件时，会有冲突
    // TODO     待解决
    caseSubmit(e) {
      if(!this.username)
      {
        alert('请登录！');
        setTimeout(() => {
          this.$router.push({name: 'ManagerLogin'});
        }, 500)
      }
      else {
        let formData = new FormData()
        let file = e.target.files[0]
        console.log(this.cur)
        formData.append('file', file, this.cur + ".zip")
        console.log(formData)
        postCase(formData)
          .then(response => {
            if(response.status >= 200 && response.status < 300)
            {
              alert("用例上传成功")

            }
            else {
              alert("用例上传失败")
            }
          })
      }
    },

    onSubmit() {
      if(!this.username)
      {
        alert('请登录！');
        setTimeout(() => {
          this.$router.push({name: 'ManagerLogin'});
        }, 500)
      }
      else
      {

        postQuestion(this.username, this.form.title, this.imagePath, this.form.content,this.form.time_limit, this.form.memory_limit, this.form.cases, token)
          .then(response => {
            if(response.status >= 200 && response.status < 300) {
              alert("发表成功!")
              setTimeout(() => {
                console.log(response)
                this.$router.push("/question/" + response.data.data.id)
              }, 500)

            }
          })
      }
    },
    addContent(txt) {
      this.form.content = this.form.content + txt
      console.log(this.form.content)
    },
    logout() {
      localStorage.clear();
      location.reload()
      console.log("out")
    },
  }

}
</script>

<style scoped>

.main {
  font: 13px Small;
  padding-right: 4em;
  margin-left: 20em;
  margin-right: 20em;
  text-align: center;
  background-color: white;
}

.avatar {
  height: 178px;
  width: 178px;
  display: block;
}

.toolbar {
  padding-left: 9em;
  padding-right: 9em;
  padding-bottom: 2em;
}

</style>
